#page2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #da1516;
    /* background-image: url("../assets/images/page2/page2_bg1.png"); */
    background-size: 100% auto;
    background-repeat: repeat-y;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}

#page2 .therm {
    height: 85%;
    width: 1.44rem;
    border-radius: 0.79rem;
    background-color: #b01e23;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#page2 .word1 {
    position: absolute;
    left: 0.1rem;
    top: 0.4rem;
    height: 0.69rem;
    width: 0.33rem;
    background-image: url("../assets/images/page2/word1_05.png");
    background-size: 100% 100%;
}

#page2 .word2 {
    position: absolute;
    left: 0.1rem;
    top: 1.14rem;
    height: 1.47rem;
    width: 0.7rem;
    background-image: url("../assets/images/page2/word2_05.png");
    background-size: 100% 100%;
}

#page2 .word3 {
    position: absolute;
    left: 0.48rem;
    top: 2.7rem;
    height: 2.45rem;
    width: 0.42rem;
    background-image: url("../assets/images/page2/word3_05.png");
    background-size: 100% 100%;
}

#page2 .word4 {
    position: absolute;
    right: 0.1rem;
    top: 0.4rem;
    height: 5.87rem;
    width: 0.21rem;
    background-image: url("../assets/images/page2/word4_05.png");
    background-size: 100% 100%;
}

#page2 .word5 {
    position: absolute;
    left: 0.1rem;
    top: 2.8rem;
    height: 3.55rem;
    width: 0.23rem;
    background-image: url("../assets/images/page2/word5_05.png");
    background-size: 100% 100%;
}

#page2 .word6 {
    position: absolute;
    left: 0.48rem;
    top: 5.3rem;
    height: 3.57rem;
    width: 0.24rem;
    background-image: url("../assets/images/page2/word6_05.png");
    background-size: 100% 100%;
    z-index: 1;
}

#page2 .therm_point {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2.3rem;
    height: 2.3rem;
    background-color: #b01e23;
    border-radius: 1.15rem;
}

#page2 .therm_scale {
    position: absolute;
    bottom: 2.4rem;
    left: 1.7rem;
    width: 2.9rem;
    height: 70%;
    background-image: url("../assets/images/page2/sacle_04.png");
    background-size: 100% 100%;
}

#page2 .hand_heart {
    position: absolute;
    top: 1.94rem;
    left: 0.74rem;
    height: 3.42rem;
    width: 1.68rem;
    background-image: url("../assets/images/page2/hand_heart/hand_heart1.png");
    background-size: 100% 100%;
}

#page2 .walk_Man {
    position: absolute;
    top: 4.44rem;
    right: 0.43rem;
    height: 5.22rem;
    width: 0.86rem;
    background-image: url("../assets/images/page2/walk_man_05.png");
    background-size: 100% 100%;
}

#page2 .button {
    position: absolute;
    bottom: 0.38rem;
    right: 0.48rem;
    height: 0.66rem;
    width: 1rem;
    background-image: url("../assets/images/page2/button_05.png");
    background-size: 100% 100%;
}

.shine_heart {
    animation: shine_heart 0.2s linear infinite alternate;
    -moz-animation: shine_heart 0.2s linear infinite alternate;
    ;
    /* Firefox */
    -webkit-animation: shine_heart 0.2s linear infinite alternate;
    ;
    /* Safari and Chrome */
    -o-animation: shine_heart 0.2s linear infinite alternate;
    ;
    /* Opera */
}

@keyframes shine_heart {
    0% {
        background: url("../assets/images/page2/hand_heart/hand_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    50% {
        background: url("../assets/images/page2/hand_heart/hand_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page2/hand_heart/hand_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-moz-keyframes shine_heart {
    0% {
        background: url("../assets/images/page2/hand_heart/hand_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    50% {
        background: url("../assets/images/page2/hand_heart/hand_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page2/hand_heart/hand_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-webkit-keyframes shine_heart {
    0% {
        background: url("../assets/images/page2/hand_heart/hand_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    50% {
        background: url("../assets/images/page2/hand_heart/hand_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page2/hand_heart/hand_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@-o-keyframes shine_heart {
    0% {
        background: url("../assets/images/page2/hand_heart/hand_heart1.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    50% {
        background: url("../assets/images/page2/hand_heart/hand_heart2.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
    100% {
        background: url("../assets/images/page2/hand_heart/hand_heart3.png");
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

.shine_bg {
    /* animation: shine_bg 0.2s linear infinite alternate;
    -moz-animation: shine_bg 0.2s linear infinite alternate;
    
    /* Firefox */
    /* -webkit-animation: shine_bg 0.2s linear infinite alternate; */
    
    /* Safari and Chrome */
    /* -o-animation: shine_bg 0.2s linear infinite alternate; */
    /* Opera */
}

@keyframes shine_bg {
    0% {
        background-image: url("../assets/images/page2/page2_bg1.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
    100% {
        background-image: url("../assets/images/page2/page2_bg2.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
}

@-moz-keyframes shine_bg {
    0% {
        background-image: url("../assets/images/page2/page2_bg1.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
    100% {
        background-image: url("../assets/images/page2/page2_bg2.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
}

@-webkit-keyframes shine_bg {
    0% {
        background-image: url("../assets/images/page2/page2_bg1.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
    100% {
        background-image: url("../assets/images/page2/page2_bg2.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
}

@-o-keyframes shine_bg {
    0% {
        background-image: url("../assets/images/page2/page2_bg1.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
    100% {
        background-image: url("../assets/images/page2/page2_bg2.png");
        background-size: 100% auto;
        background-repeat: repeat-y;
    }
}

.word1_animation {
    animation: word1_animation 0.5s 1 alternate;
    -moz-animation: word1_animation 0.5s 1 alternate;
    ;
    /* Firefox */
    -webkit-animation: word1_animation 0.5s 1 alternate;
    ;
    /* Safari and Chrome */
    -o-animation: word1_animation 0.5s 1 alternate;
    ;
    /* Opera */
}

@keyframes word1_animation {
    0% {
        opacity: 0;
        left: 0.1rem;
        top: -0.8rem;
    }
    100% {
        opacity: 1;
        left: 0.1rem;
        top: 0.4rem;
    }
}

@-moz-keyframes word1_animation {
    0% {
        opacity: 0;
        left: 0.1rem;
        top: -0.8rem;
    }
    100% {
        opacity: 1;
        left: 0.1rem;
        top: 0.4rem;
    }
}

@-webkit-keyframes word1_animation {
    0% {
        opacity: 0;
        left: 0.1rem;
        top: -0.8rem;
    }
    100% {
        opacity: 1;
        left: 0.1rem;
        top: 0.4rem;
    }
}

@-o-keyframes word1_animation {
    0% {
        opacity: 0;
        left: 0.1rem;
        top: -0.8rem;
    }
    100% {
        opacity: 1;
        left: 0.1rem;
        top: 0.4rem;
    }
}

.word2_animation {
    animation: word2_animation 1.5s 1 0.5s alternate;
    -moz-animation: word2_animation 1.5s 1 0.5s alternate;
    ;
    /* Firefox */
    -webkit-animation: word2_animation 1.5s 1 0.5s alternate;
    ;
    /* Safari and Chrome */
    -o-animation: word2_animation 1.5s 1 0.5s alternate;
    ;
    /* Opera */
}

@keyframes word2_animation {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-moz-keyframes word2_animation {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-webkit-keyframes word2_animation {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-o-keyframes word2_animation {
    0% {
        opacity: 0;
        transform: scale(0, 0);
        -ms-transform: scale(0, 0);
        -webkit-transform: scale(0, 0);
        -o-transform: scale(0, 0);
        -moz-transform: scale(0, 0);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

.word3_animation {
    animation: word3_animation 1.5s linear 2s 1 alternate;
    -moz-animation: word3_animation 1.5s linear 2s 1 alternate;
    ;
    /* Firefox */
    -webkit-animation: word3_animation 1.5s linear 2s 1 alternate;
    ;
    /* Safari and Chrome */
    -o-animation: word3_animation 1.5s linear 2s 1 alternate;
    ;
    /* Opera */
}

@keyframes word3_animation {
    0% {
        opacity: 0;
        transform: scale(3, 3);
        -ms-transform: scale(3, 3);
        -webkit-transform: scale(3, 3);
        -o-transform: scale(3, 3);
        -moz-transform: scale(3, 3);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-moz-keyframes word3_animation {
    0% {
        opacity: 0;
        transform: scale(3, 3);
        -ms-transform: scale(3, 3);
        -webkit-transform: scale(3, 3);
        -o-transform: scale(3, 3);
        -moz-transform: scale(3, 3);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-webkit-keyframes word3_animation {
    0% {
        opacity: 0;
        transform: scale(3, 3);
        -ms-transform: scale(3, 3);
        -webkit-transform: scale(3, 3);
        -o-transform: scale(3, 3);
        -moz-transform: scale(3, 3);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

@-o-keyframes word3_animation {
    0% {
        opacity: 0;
        transform: scale(3, 3);
        -ms-transform: scale(3, 3);
        -webkit-transform: scale(3, 3);
        -o-transform: scale(3, 3);
        -moz-transform: scale(3, 3);
    }
    100% {
        opacity: 1;
        transform: scale(1, 1);
        -ms-transform: scale(1, 1);
        -webkit-transform: scale(1, 1);
        -o-transform: scale(1, 1);
        -moz-transform: scale(1, 1);
    }
}

.word4_animation {
    animation: word4_animation 1.5s linear 1 alternate;
    -moz-animation: word4_animation 1.5s linear 1 alternate;
    ;
    /* Firefox */
    -webkit-animation: word4_animation 1.5s linear 1 alternate;
    ;
    /* Safari and Chrome */
    -o-animation: word4_animation 1.5s linear 1 alternate;
    ;
    /* Opera */
}

@keyframes word4_animation {
    0% {
        opacity: 0;
        right: -0.3rem;
        top: 0.4rem;
    }
    100% {
        opacity: 1;
        right: 0.1rem;
        top: 0.4rem;
    }
}

@-moz-keyframes word4_animation {
    0% {
        opacity: 0;
        right: -0.3rem;
        top: 0.4rem;
    }
    100% {
        opacity: 1;
        right: 0.1rem;
        top: 0.4rem;
    }
}

@-webkit-keyframes word4_animation {
    0% {
        opacity: 0;
        right: -0.3rem;
        top: 0.4rem;
    }
    100% {
        opacity: 1;
        right: 0.1rem;
        top: 0.4rem;
    }
}

@-o-keyframes word4_animation {
    0% {
        opacity: 0;
        right: -0.3rem;
        top: 0.4rem;
    }
    100% {
        opacity: 1;
        right: 0.1rem;
        top: 0.4rem;
    }
}

.word5_animation {
    animation: word5_animation 1.5s linear 1 alternate;
    -moz-animation: word5_animation 1.5s linear 1 alternate;
    ;
    /* Firefox */
    -webkit-animation: word5_animation 1.5s linear 1 alternate;
    ;
    /* Safari and Chrome */
    -o-animation: word5_animation 1.5s linear 1 alternate;
    ;
    /* Opera */
}

@keyframes word5_animation {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
    }

    70% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    85% {
        transform: rotate(-80deg);
        -ms-transform: rotate(-80deg);
        -webkit-transform: rotate(-80deg);
        -o-transform: rotate(-80deg);
        -moz-transform: rotate(-80deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}

@-moz-keyframes word5_animation {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
    }

    70% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    85% {
        transform: rotate(-80deg);
        -ms-transform: rotate(-80deg);
        -webkit-transform: rotate(-80deg);
        -o-transform: rotate(-80deg);
        -moz-transform: rotate(-80deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}

@-webkit-keyframes word5_animation {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
    }

    70% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    85% {
        transform: rotate(-80deg);
        -ms-transform: rotate(-80deg);
        -webkit-transform: rotate(-80deg);
        -o-transform: rotate(-80deg);
        -moz-transform: rotate(-80deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}

@-o-keyframes word5_animation {
    0% {
        opacity: 0;
        transform: rotate(-180deg);
        -ms-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        -o-transform: rotate(-180deg);
        -moz-transform: rotate(-180deg);
    }

    70% {
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    85% {
        transform: rotate(-80deg);
        -ms-transform: rotate(-80deg);
        -webkit-transform: rotate(-80deg);
        -o-transform: rotate(-80deg);
        -moz-transform: rotate(-80deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
}


.word6_animation {
    animation: word6_animation 1.5s linear 1 alternate;
    -moz-animation: word6_animation 1.5s linear 1 alternate;; /* Firefox */
    -webkit-animation: word6_animation 1.5s linear 1 alternate;; /* Safari and Chrome */
    -o-animation: word6_animation 1.5s linear 1 alternate;; /* Opera */
}

@keyframes word6_animation {
    0% {
        opacity: 0;
        top: 9.3rem;
    }
    100% {
        opacity: 1;
        top: 5.3rem;
    }
    
}

@-moz-keyframes word6_animation {
    0% {
        opacity: 0;
        top: 9.3rem;
    }
    100% {
        opacity: 1;
        top: 5.3rem;
    }
}

@-webkit-keyframes word6_animation {
    0% {
        opacity: 0;
        top: 9.3rem;
    }
    100% {
        opacity: 1;
        top: 5.3rem;
    }
}

@-o-keyframes word6_animation {
    0% {
        opacity: 0;
        top: 9.3rem;
    }
    100% {
        opacity: 1;
        top: 5.3rem;
    }
}

.word1,
.word2,
.word3,
.word4,
.word5,
.word6 {
    opacity: 0;
}

.word1.word1_animation,
.word2.word2_animation,
.word3.word3_animation,
.word4.word4_animation,
.word5.word5_animation,
.word6.word6_animation{
    animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
}